<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>switch3</title>
    <link rel="stylesheet" href="../../model/jsFn.css">
    <link rel="stylesheet" href="../../model/element.css">
</head>
<body>
<!--目录-->
<div class="catalog">
    <h2>目录</h2>
    <ul>
        <li>
            <p><a href="#element">< switch style3 ></a></p>
        </li>
        <li>
            <p><a href="#attribute">属性</a></p>
            <ul>
                <li><p><a href="#example">实例</a></p></li>
                <li><p><a href="#optional">可选属性</a></p></li>
                <li><p><a href="#note">提示和注释</a></p></li>
                <li><p><a href="#sketch">效果图</a></p></li>
            </ul>
        </li>
        <li>
            <p><a href="#jsFn">js函数</a></p>
            <ul>
                <li><p><a href="#jsFn_checkedon">checked_on </a></p></li>
                <li><p><a href="#jsFn_checkedoff">checked_off </a></p></li>
                <li><p><a href="#jsFn_change">change </a></p></li>
            </ul>
        </li>
        <li>
            <p><a href="#childElement">子标签</a></p>
            <ul>
                <li><p><a href="#childElement_no">无</a></p></li>

            </ul>
        </li>
    </ul>
</div>
<!--标签-->
<div id="element">
    <h2>switch style3</h2>
    <div>简介:</div>
    <p>是否同意，开关</p>
</div>
<!--属性-->
<div id="attribute">
    <h2>属性</h2>
    <div style="margin-left: 25px" id="example">
        <h3>实例:</h3>
        <!--xmp标签可以直接书写xml格式文本-->
        <xmp>
            <switch style="3" id="switch3" text="你好" leftIcon="img.about.png" textsecond="second">
            </switch>
        </xmp>
    </div>
    <div id="optional">
        <h3>可选属性:</h3>
        <table>
            <tbody>
            <tr>
                <th>属性</th>
                <th>值</th>
                <th>描述</th>
            </tr>
            <tr>
                <td>text</td>
                <td>string</td>
                <td> 填充内容</td>
            </tr>
            <tr>
                <td>on</td>
                <td>true/false</td>
                <td>string 类型，设置开关的状态</td>
            </tr>

            <tr>
                <td>switchColor</td>
                <td>#颜色</td>
                <td>string 类型，6/8位，设置右侧开关按钮图片的 背景颜色</td>
            </tr>
            <tr>
                <td>textColor</td>
                <td>#颜色</td>
                <td>string 类型，#开头，6/8位数字，设置左侧上面文本控件内容</td>
            </tr>
            <tr>
                <td>textSize</td>
                <td>string</td>
                <td>string 类型，单位px ，设置左侧上面文本控件字体大小</td>
            </tr>
            <tr>
                <td>lefticon</td>
                <td>string</td>
                <td>string 类型，控件左侧图片控件的图片路径</td>
            </tr>
            <tr>
                <td>textsecond</td>
                <td>string</td>
                <td>string 类型，设置控件左侧上方文本控件的文本内容</td>
            </tr>
            <tr>
                <td>textSecondSize</td>
                <td>string</td>
                <td>string 类型，单位px，设置控件左侧下方文本控件的文本字体大小</td>
            </tr>
            <tr>
                <td>textSecondColor</td>
                <td>string</td>
                <td>string 类型，#开头，6/8位数字，设置控件左侧下方文本控件的文本字体颜色</td>
            </tr>
            <tr>
                <td>switch_width</td>
                <td>string</td>
                <td>string 类型，单位dp，设置右侧开关控件的宽度</td>
            </tr>
            <tr>
                <td>switch_height</td>
                <td>string</td>
                <td>string 类型，单位dp，设置右侧开关控件的高度</td>
            </tr>
            <tr>
                <td>switch_off</td>
                <td>string</td>
                <td>string 类型，设置右侧开关控件关闭显示的图片路径</td>
            </tr>
            <tr>
                <td>switch_on</td>
                <td>string</td>
                <td>string 类型，设置右侧开关控件开启状态的图片路径</td>
            </tr>

            <tr>
                <td>height</td>
                <td>string</td>
                <td>string 类型，单位dp，设置控件整体的高度</td>
            </tr>

            </tbody>
        </table>
    </div>
    <div id="note">
        <h3>提示和注释:</h3>
    </div>
    <div id="sketch">
        <h3>效果图:</h3>
        <img src="img/ifagree.png" alt="">
    </div>
</div>
<!--js方法-->
<div id="jsFn">
    <h2>js方法</h2>
    <div class="jsFnModel" id="jsFn_checkedon">
        <h3>checked_on</h3>
        <div class="shape">
            <h3>函数使用样式</h3>
            <p>this.checked_on()->document</p>
        </div>
        <div class="profile">
            <h3>函数功能简介</h3>
            <p>设置开关为开启状态</p>
        </div>
        <div class="version">
            <p>稳定性;2 - 稳定的</p>
            <p>新增于:v0.0.0</p>
        </div>
        <div class="params">
            <h3>参数列表:</h3>
            <ul>
                <li>
                    <p>无</p>

                </li>
            </ul>
        </div>
        <div class="res">
            <h3>返回值:</h3>
            <p>document</p>
            <p>返回控件自己</p>
        </div>
        <div class="code">
            <h3>例子</h3>
            <pre>
            <code>
                document.$('id').checked_on();
            </code>
        </pre>
        </div>
        <div class="error">
            <h3>抛出错误</h3>
        </div>
    </div>
    <div class="jsFnModel" id="jsFn_checkedoff">
        <h3>checked_off</h3>
        <div class="shape">
            <h3>函数使用样式</h3>
            <p>this.checked_off()->document</p>
        </div>
        <div class="profile">
            <h3>函数功能简介</h3>
            <p>设置开关为关闭状态</p>
        </div>
        <div class="version">
            <p>稳定性;2 - 稳定的</p>
            <p>新增于:v0.0.0</p>
        </div>
        <div class="params">
            <h3>参数列表:</h3>
            <ul>
                <li>
                    <p>无</p>
                </li>
            </ul>
        </div>
        <div class="res">
            <h3>返回值:</h3>
            <p>document</p>
            <p>返回控件自己</p>
        </div>
        <div class="code">
            <h3>例子</h3>
            <pre>
            <code>
                document.$('id').checked_off();
            </code>
        </pre>
        </div>
        <div class="error">
            <h3>抛出错误</h3>
        </div>
    </div>
    <div class="jsFnModel" id="jsFn_change">
        <h3>change</h3>
        <div class="shape">
            <h3>函数使用样式</h3>
            <p>this.change(str)->document</p>
        </div>
        <div class="profile">
            <h3>函数功能简介</h3>
            <p>设置控件左侧上方文本内容</p>
        </div>
        <div class="version">
            <p>稳定性;2 - 稳定的</p>
            <p>新增于:v0.0.0</p>
        </div>
        <div class="params">
            <h3>参数列表:</h3>
            <ul>
                <li>
                    <p>str</p>
                    <p>无</p>
                    <p>无</p>
                </li>
            </ul>
        </div>
        <div class="res">
            <h3>返回值:</h3>
            <p>document</p>
            <p>返回控件自己</p>
        </div>
        <div class="code">
            <h3>例子</h3>
            <pre>
            <code>
                document.$('id').change('hello');
                //改变文本
            </code>
        </pre>
        </div>
        <div class="error">
            <h3>抛出错误</h3>
        </div>
    </div>

</div>
<!--子标签-->
<div id="childElement">
    <h2>子标签 </h2>
    <div id="childElement_no">
        <h3>无</h3>
    </div>


</div>
<div class="author"><p>by-姜进</p></div>
</body>
</html>